<script setup lang="ts">
import {type DropdownOption, Icon} from "tdesign-vue-next"
import {useAppStore, useUserStore} from "@/store"
import {useRoute, useRouter} from "vue-router";

import CollapseButton from "@/components/CollapseButton.vue";

  const userStore = useUserStore();
  const appStore = useAppStore();

  const router = useRouter();
  const route = useRoute();

  const clickHandler = async ({value}: DropdownOption) => {
    switch (value) {
      case "logout":
        await appStore.logout();
        console.log("退出路由 = ",route.fullPath)
        //alert(route.fullPath)
        //await router.push(`/login?redirect=${route.fullPath}`);
        await router.push({
          name: "login",
          params: { redirect: route.fullPath },
        });
        break;
      default:
        throw new Error("该指令无设置任何操作");
    }
  }

</script>

<template>
  <t-header class="custom-header">
<!--    <div class="collapse-button">菜单展开按钮</div>-->
    <collapse-button v-model:collapsed="appStore.menuCollapsed"></collapse-button>
    <div class="operation-area">
      <t-dropdown :options="[{ content: '退出登陆', value: 'logout'}]" trigger="click" @click="clickHandler">
        <t-button variant="text">
          <template #icon>
            <icon name="user"></icon>
          </template>
          {{ userStore.currentUser && userStore.currentUser.nickname }}
        </t-button>
      </t-dropdown>
    </div>
  </t-header>
</template>

<style scoped>
  .custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
</style>